<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" />
        </div>
        <div class="wx-head">
          <div
            class="wx-head-con bg-color-black"
            v-for="(item, index) in headList"
            :key="index"
          >
            <div class="left"><a-icon :type="item.icon" /></div>
            <div class="right">
              <span class="num">{{ item.num }}</span>
              <span class="title">{{ item.title }}</span>
            </div>
          </div>
        </div>
        <div class="bj-bottom">
          <dv-border-box-11
            :color="['#2496c1']"
            backgroundColor="rgba(0, 0, 0, 0.1)"
            title="库存实时监控"
          >
            <div class="bj-echarts">
              <div
                v-for="(item, index) in bjData"
                class="bj-echarts-con bg-color-black2"
                :key="index"
              >
                <div style="width:55%">
                  <bj-echarts
                    :data="item"
                    :bjindex="Number(index)"
                  ></bj-echarts>
                </div>
                <div class="name" style="width:45%">
                  <p>
                    <span>编码：</span
                    ><span class="hwname">{{ item.备件编码 }}</span>
                  </p>
                  <p></p>
                  <p>
                    <span>名称：</span
                    ><span class="hwname">{{ item.备件名称 }}</span>
                  </p>
                  <p>
                    <span>规格：</span
                    ><span class="hwname">{{ item.备件型号 }} </span>
                  </p>
                  <p>
                    <span>货位：</span>
                    <span class="hwname">{{ item.货位名称 }}</span>
                  </p>
                </div>
              </div>
            </div>
          </dv-border-box-11>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/ToHead.vue'
import { sparePartRecordChart } from './api/dataApi'
import BjEcharts from './components/bj/BjEcharts.vue'

export default {
  name: 'App',
  components: {
    ToHead,
    BjEcharts,
  },
  data() {
    return {
      title: '备件库存动态大屏',
      headList: [
        { icon: 'import' },
        { icon: 'export' },
        { icon: 'import' },
        { icon: 'export' },
        { icon: 'warning' },
      ],
      bjData: [],
      pageIndex: 1,
    }
  },

  watch: {},

  created() {},
  mounted() {
    this.getData()
    this.getD()
  },

  methods: {
    getD() {
      setInterval(() => {
        this.getData()
      }, 10000)
    },
    getData() {
      const that = this
      const params = {
        _params: {},
        _condition: {},
        pageSize: 15,
        pageIndex: this.pageIndex,
        sortField: '',
        sortOrder: '',
      }
      sparePartRecordChart(params)
        .then((res) => {
          if (String(res.code) === '0') {
            that.headList = res.sumData
            that.headList[0]['icon'] = 'import'
            that.headList[1]['icon'] = 'export'
            that.headList[2]['icon'] = 'import'
            that.headList[3]['icon'] = 'export'
            that.headList[4]['icon'] = 'warning'
            if (res.data && res.data.length > 0) {
              that.bjData = res.data
              if (res.data.length < 15) {
                that.pageIndex = 1
              } else {
                that.pageIndex++
              }
            } else {
              that.pageIndex = 1
            }
          } else {
            that.$message.error(
              res.msg ? res.msg : '数据请求失败，请联系管理员！'
            )
            that.pageIndex = 1
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
  },
}
</script>

<style lang="less" scoped>
@card1: #007aff;
@card2: #8866f7;
@card3: #ff9502;
@card4: #34c758;
@card5: #ff3a30;
.appp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.wx-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 15px 15px;
  box-sizing: border-box;
  height: 10vh;
  .wx-head-con {
    flex: 1;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    .left {
      width: 50px;
      font-size: 26px;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      .num {
        font-size: 21px;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      .title {
        font-size: 12px;
        color: #ccc;
      }
    }
  }
  .wx-head-con:last-child {
    margin-right: 0px;
    // background: @card5;
    .left {
      color: @card5;
    }
    .num {
      color: @card5;
    }
  }
  .wx-head-con:first-child {
    // background: @card1;
    .left {
      color: @card1;
    }
    .num {
      color: @card1;
    }
  }
  .wx-head-con:nth-child(2) {
    .left {
      color: #34c758;
    }
    // background: @card2;
    .num {
      color: #34c758;
    }
  }
  .wx-head-con:nth-child(3) {
    // background: @card3;
    .left {
      color: @card3;
    }
    .num {
      color: @card3;
    }
  }
  .wx-head-con:nth-child(4) {
    // background: @card4;
    .left {
      color: #8866f7;
    }
    .num {
      color: #8866f7;
    }
  }
}

.border11 path {
  stroke-width: 1 !important;
}
.bj-bottom {
  margin: 0px 15px;
  height: 74vh;
  box-sizing: border-box;
}
.bj-echarts {
  display: grid;
  /* grid-template-columns: repeat(5, 20%); */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 18vh 18vh 18vh 18vh 18vh;
  padding-top: 50px;
  grid-gap: 18px;
  box-sizing: border-box;
  .bj-echarts-con {
    height: 18vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
  }
}

.name {
  text-align: left;
  p {
    line-height: 20px;
  }
  span {
    color: #999;
    font-size: 11px;
  }
  .hwname {
    color: #ddd;
    font-size: 11px;
  }
}
.bjname {
  color: #1ed3e5;
  font-size: 1.5rem;
}
</style>
